import React from 'react';
import styles from './index.less';
import { Form,Input,Row,Col,Button,Radio,Divider } from 'antd';
import { FormInstance } from 'antd/lib/form';
import { Link } from 'umi';
import ReactSimpleVerify from './simpleVerify/index'


export default class RegisterModel extends React.Component{
    formRef = React.createRef<FormInstance>();
    render(){
        return (
            <>
                <div className={styles.top}>
                    <div className={styles.header}>
                        <span className={styles.title}>欢迎注册数字蜂巢</span>
                    </div>
                </div>
                <div className={styles.main}>
                    <Form ref={this.formRef}>
                        <Form.Item
                            name="value"
                            rules={[{ required: true, message: '请输入手机号码!' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            name="value1"
                        >
                            <ReactSimpleVerify success={ () => {

                            }}/>
                        </Form.Item>
                        <Form.Item >
                            <Row gutter={8}>
                                <Col span={16}>
                                    <Form.Item
                                    name="captchaa"
                                    noStyle
                                    rules={[{ required: true, message: 'Please input the captcha you got!' }]}
                                    >
                                    <Input />
                                    </Form.Item>
                                </Col>
                                <Col span={8}>
                                    <Button style={{width: '100%'}} type="primary">获取验证码</Button>
                                </Col>
                            </Row>
                        </Form.Item>
                        <Form.Item name="radio-group">
                            <Radio.Group>
                                <Radio value="a">同意并遵守<a>《MarketingDesk服务条款》</a>和<a>《免责声明》</a></Radio>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" style={{width: '100%'}} htmlType="submit">
                                立即注册
                            </Button>
                        </Form.Item>
                    </Form>
                    <div>
                        <p>已有账号， <Link to="/user/login">直接登陆</Link> </p>
                    </div>
                    <div>
                        <Divider plain>或</Divider>
                    </div>
                    <div>
                        <Button style={{width: '100%'}}>使用微信登陆</Button> 
                    </div>
                </div>
            </> 
        )
    }
}